<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频素材</title>
    <%@include file="/WEB-INF/layouts/index-header.jsp"%>

    <style type="text/css">

        .pay-video {
            clear: both;
            display: inline-block;
            position: relative;
            width: 150px;
            height: 84.375px;
            vertical-align: center;
            font-weight: 400;
            font-size: 14px;
            font-style: normal;
        }

        .pay-video:hover {
            border: 1px solid #44b549;
        }

        .pay-video:hover > .play-mask {
            display: unset;
        }

        .pay-video-length {
            position: absolute;
            bottom: 0px;
            padding: 0 8px;
            background: rgba(0, 0, 0, 0.75) !important;
            color: #fff;
            font-weight: 400;
            font-style: normal;
            text-align: right !important;
        }

        .pay-video-thumb {
            padding: 0px;
            margin: 0px;
            display: block;
            width: 150px;
            height: 84.375px;
            -webkit-background-size: contain;
            background-size: contain;
            background-repeat: no-repeat;
            background-color: #000;
        }

        .play-mask {
            background: rgba(0, 0, 0, 0.35) !important;
            color: #fff;
            line-height: 85px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            font-size: 0;
            display: none;
        }

        .icon-video-play {
            background: url("${staticPath}/wechat/image/icon-video-play.png") 0 0 no-repeat;
            width: 48px;
            height: 49px;
            vertical-align: middle;
            display: inline-block;
        }

        .vm-box {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

    </style>

</head>
<body>

<div class="tpanel">
    <div class="panel-content">
        <div class="container-fluid">
            <div id="tool">
                <form id="searchForm" class="form-inline" onsubmit="return search('#searchForm','#table')" style="margin-top:20px;margin-bottom:20px;">
                    <div class="form-group">
                        <a class="btn btn-success radius" href="${ctx}/admin/wechat/video/create">
                            <span class="glyphicon glyphicon-cog"></span> 添加视频
                        </a>
                    </div>
                </form>
            </div>
            <table id="table"></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    changeTitle('视频素材');

    $(function() {

        $('.form_datetime').datetimepicker({
            language : 'zh-CN',
            autoclose : true
        });

        $('#table').bootstrapTable({
            url: '${ctx}/admin/wechat/video/page-list?search_EQL_wechatMpId=${currentWechatMpId}&order=desc&sort=created_time',
            idField : 'id',
            striped : true,
            pagination : true,
            pageNumber : 1,
            pageSize : 25,
            sidePagination : 'server',
            uniqueId : 'id',
            queryParams : queryParams,
            responseHandler : responseHandler,
            columns: [
                {
                    title: '#',
                    width : 50,
                    align : 'center',
                    valign:'middle',
                    formatter: snFormatter
                },
                {
                    field: 'coverUrl',
                    title: '视频缩略图(点击播放)',
                    valign:'middle',
                    align : 'center',
                    formatter : function(value,row,index) {
                        var content = "";
                        content =   '<div class="pay-video" data-action="' + row.url +'" onclick="reviewVideo(this)">' +
                                        '<em class="pay-video-length">' + row.length + '</em>' +
                                        '<img class="pay-video-thumb" src="' + value + '" alt=""></img>' +
                                        '<div class="play-mask">' +
                                            '<i class="icon-video-play"></i>' +
                                            '<span class="vm-box"></span>' +
                                        '</div>' +
                                    '</div>';
                        return content;
                    }
                },
                {
                    field: 'title',
                    title: '标题',
                    valign:'middle',
                    align : 'center'
                },
                {
                    field: 'createdTime',
                    title: '创建时间',
                    valign:'middle',
                    align : 'center'
                },
                {
                    field: 'op',
                    searchable : true,
                    title: '操作',
                    valign:'middle',
                    align : 'center',
                    formatter : operateFormatter
                }
            ]
        });
    });

    function operateFormatter(value,row,index) {
        var content = '<a href="${ctx}/admin/wechat/video/download?id=' + row.id + '" title="下载"><i class="iconfont icon-xiazai"></i></a>';
        content += '&nbsp;&nbsp;&nbsp;&nbsp;';
        content += '<a href="${ctx}/admin/wechat/video/update?id=' + row.id + '" title="编辑"><i class="iconfont icon-iconfontcolor32"></i></a>';
        content += '&nbsp;&nbsp;&nbsp;&nbsp;';
        content += '<a href="javascript:del(' + row.id + ')" title="删除"><i class="iconfont icon-shanchu"></i></a>';
        return content;
    }

    function del(id,name) {
        carefulDelete('${ctx}/admin/wechat/video/careful-delete', id, '请输入您的管理密码以确定删除此系统资源');
    }

    function reviewVideo(target) {
        openWindow("视频查看", $(target).attr("data-action"));
    }
</script>

</body>
</html>
